<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery-2.0.3.min.js"></script>
    <script src="../js/fileinput.js" type="text/javascript"></script>
    <script src="../js/fileinput_locale_de.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
    <div class="page-header">
        <h1>Bootstrap File Input Example <small></h1>
        <h3 class="text-success">German Translation Demo</h2>
    </div>
    <form enctype="multipart/form-data">
        <input id="file-0" class="file" type="file" multiple data-min-file-count="1">
        <br>
        <button type="submit" class="btn btn-primary">Einreichen</button>
        <button type="reset" class="btn btn-default">Erfrischen</button>
    </form>
    <br>
    <form enctype="multipart/form-data">
        <input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
        <br>
        <div class="form-group">
            <input id="file-0b" class="file" type="file">
        </div>
        <div class="form-group">
            <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
        </div>
        <div class="form-group">
            <input id="file-2" type="file" class="file" readonly data-show-upload="false">
        </div>
        <div class="form-group">
            <label>Vorschau Datei-Icon</label>
            <input id="file-3" type="file" multiple=true>
        </div>
        <div class="form-group">
            <input id="file-4" type="file" class="file" data-upload-url="#">
        </div>
        <div class="form-group">
            <button class="btn btn-warning" type="button">Deaktivieren Test</button>
            <button class="btn btn-info" type="reset">Erfrischen Test</button>
            <button class="btn btn-primary">Einreichen</button>
            <button class="btn btn-default" type="reset">Rücksetzen</button>
        </div>
        <div class="form-group">
            <input type="file" class="file" id="test-upload" multiple>
            <div id="errorBlock" class="help-block"></div>
        </div>
        <div class="form-group">
            <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#"
                   data-preview-file-icon="">
        </div>
    </form>
</div>
<input id="input-24" type="file" multiple>

</body>
<script>
    $("#file-0").fileinput({
        'allowedFileExtensions': ['jpg', 'png', 'gif'],
    });
    $("#file-1").fileinput({
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    /*
    $(".file").on('fileselect', function(event, n, l) {
        alert('File Selected. Name: ' + l + ', Num: ' + n);
    });
    */
    $("#file-3").fileinput({
        showUpload: false,
        showCaption: false,
        browseClass: "btn btn-primary btn-lg",
        fileType: "any",
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
    });
    $("#file-4").fileinput({
        uploadExtraData: {kvId: '10'}
    });
    $(".btn-warning").on('click', function () {
        if ($('#file-4').attr('disabled')) {
            $('#file-4').fileinput('enable');
        } else {
            $('#file-4').fileinput('disable');
        }
    });
    $(".btn-info").on('click', function () {
        $('#file-4').fileinput('refresh', {previewClass: 'bg-info'});
    });
    /*
    $('#file-4').on('fileselectnone', function() {
        alert('Huh! You selected no files.');
    });
    $('#file-4').on('filebrowse', function() {
        alert('File browse clicked for #file-4');
    });
    */
    $(document).ready(function () {
        $("#test-upload").fileinput({
            'showPreview': false,
            'allowedFileExtensions': ['jpg', 'png', 'gif'],
            'elErrorContainer': '#errorBlock'
        });
        /*
        $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
            alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
        });
        */
    });
    $("#input-24").fileinput({
        initialPreview: [
            "<img src='/images/moon.jpg' class='file-preview-image' alt='The Moon' title='The Moon'>",
            "<img src='/images/earth.jpg' class='file-preview-image' alt='The Earth' title='The Earth'>",
        ],
        overwriteInitial: false,
        maxFileSize: 100,
        initialCaption: "The Moon and the Earth"
    });
</script>
</html>